<template>
    <div class="demo">
        <h2>📌 简单用法</h2>
        <p>
            <strong>预览</strong>
        </p>
        <div class="component-wrapper">
            <div class="component-wrapper-demo">
                <syxCeshi></syxCeshi>
            </div>
            <div class="code-content" v-highlight style="height: 0;">
                <div class="code-content-height">
                    <pre><code class="html">{{codeStr}}</code></pre>
                </div>
            </div>
            <div class="lock-code" @click="showCode(0)" ref="xxx">
                <span class="lock-code-word">{{isShow[0] === false ? '显示代码' : '隐藏代码'}}</span>
            </div>
        </div>
    </div>
</template>

<script>
    // import syxCeshi from '../../../src/syxCeshi/index'
    import mixin from '../mixin'

    export default {
        mixins: [mixin],
        components: {
          // syxCeshi
        },
        data() {
            return {
                codeStr: `<syxCeshi></syxCeshi>
        `.replace(/^ {8}/gm, '').trim()
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>
